<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>N站——发布中心作品数据</title>
    <!-- 标题栏logo -->
    <link rel="icon" href="../../image/nLogo.jpg" type="image/x-icon">
    <!-- 收藏夹里显示的logo -->
    <link rel="shortcut icon" href="../../image/nLogo.jpg" type="image/x-icon">
    <!-- layui样式 -->
    <link href="../../layui/css/layui.css" rel="stylesheet">
    <script src="../../layui/layui.js"></script>
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/echarts.js"></script>
</head>
<body style="background: #F0F0F0;">
<!--导航栏-->
<div class="layui-row layui-panel" style=" background: #222222;">
    <div class="layui-col-md2" style="padding: 10px; text-align: center;">
        <a href="../../index.html" style="color: white; font-weight: bolder; font-size: x-large;">N站</a>
    </div>
    <ul class="layui-nav layui-col-md6" lay-filter="" style="background: #222222;">
        <li class="layui-nav-item"><a href="../../index.html">首页</a></li>
        <li class="layui-nav-item"><a href="../home/homeNews.html">发现</a></li>
        <li class="layui-nav-item"><a href="../home/homePublisher.html">新闻方</a></li>
        <li class="layui-nav-item"><a href="../home/homeNewsType.html">新闻专栏</a></li>
        <li class="layui-nav-item"><a href="../home/homeSubscribe.html">我的订阅</a></li>
        <li class="layui-nav-item"><a href="">可能感兴趣</a></li>
    </ul>
    <ul class="layui-nav layui-col-md2" style=" background: #222222;">
        <li class="layui-nav-item">
            <a><img src="../../image/avatar.jpg" class="layui-nav-img">peng_YuJun</a>
            <dl class="layui-nav-child">
                <dd style="color: white; text-align: center; background: orange">硬币：0</dd>
                <dd><a href="../self/selfData.html">个人中心</a></dd>
                <dd><a href="../publish/publishNews.html">新闻管理</a></dd>
                <dd><a href="../publish/publishRequest.html">申请成为新闻作者</a></dd>
                <dd><a href="#">退出登录</a></dd>
            </dl>
        </li>
    </ul>
    <div class="layui-nav layui-col-md2" style=" background: #222222; display: flex;align-items: center; padding: 10px;">
        <button class="layui-btn layui-btn-sm" lay-event="register">注册</button>
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="login">登录</button>
    </div>
</div>
<div class="layui-row" style="display: flex; margin-top: 10px;">
    <!--页面侧栏-->
    <div class="layui-col-md3" style="display: flex; flex-direction: column; align-items: flex-end; margin-right: 10px;">
        <ul class="layui-nav layui-nav-tree" lay-filter="test">
            <div style="background: #F0F0F0; padding-bottom: 10px;">
                <button lay-event="writeNews" class="layui-btn layui-btn-radius layui-btn-normal" style="width: 100%; font-size: larger;">创作新闻</button>
            </div>
            <!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
            <li class="layui-nav-item"><a href="publishNews.html">新闻管理</a></li>
            <li class="layui-nav-item"><a href="publishComm.html">评论管理</a></li>
            <li class="layui-nav-item layui-this"><a href="publishData.html">作品数据</a></li>
        </ul>
    </div>
    <!-- 页面主体 -->
    <div class="layui-col-md7">
        <div class="layui-panel" style="padding: 10px; line-height: 40px;">
            <p style="font-size: large;">新闻数据</p>
        </div>
        <div class="layui-panel" style="padding: 10px; line-height: 40px;">
            <div class="layui-row" style="display: flex; justify-content: space-around;">
                <div class="layui-panel layui-col-md2" style="padding: 10px">
                    <p style="font-size: larger; font-weight: bolder;">阅读量</p>
                    <p>100</p>
                </div>
                <div class="layui-panel layui-col-md2" style="padding: 10px">
                    <p style="font-size: larger; font-weight: bolder;">点赞量</p>
                    <p>100</p>
                </div>
                <div class="layui-panel layui-col-md2" style="padding: 10px">
                    <p style="font-size: larger; font-weight: bolder;">投币量</p>
                    <p>100</p>
                </div>
                <div class="layui-panel layui-col-md2" style="padding: 10px">
                    <p style="font-size: larger; font-weight: bolder;">收藏量</p>
                    <p>100</p>
                </div>
                <div class="layui-panel layui-col-md2" style="padding: 10px">
                    <p style="font-size: larger; font-weight: bolder;">评论量</p>
                    <p>100</p>
                </div>
            </div>
            <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
            <div id="main" style="width: 900px;height:400px; margin-top: 10px;"></div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    var days = [];
    //注意：导航 依赖 element 模块，否则无法进行功能性操作
    layui.use(['util', 'layer','form','element'], function(){
        var element = layui.element
            ,util = layui.util;

        util.event('lay-event',{
            writeNews : function (){
                window.location.href = "publishWrite.html";
            },
            login : function (){
                window.location.href = "../user/userLogin.html";
            },
            register: function (){
                window.location.href = "../user/userRegister.html";
            }
        })
    });

    //获取近七天的数组
    function getNearly7Day() {
        let days = []
        var date = new Date()
        for (let i = 0; i <= 24 * 6; i += 24) {
            //今天加上前6天
            let dateItem = new Date(date.getTime() - i * 60 * 60 * 1000) //使用当天时间戳减去以前的时间毫秒（小时*分*秒*毫秒）
            let y = dateItem.getFullYear() //获取年份
            let m = dateItem.getMonth() + 1 //获取月份js月份从0开始，需要+1
            let d = dateItem.getDate() //获取日期
            m = addDate0(m) //给为单数的月份补零
            d = addDate0(d) //给为单数的日期补零
            let valueItem = y + '-' + m + '-' + d //组合
            days.push(valueItem) //添加至数组
        }
        //给日期加0
        function addDate0(time) {
            if (time.toString().length == 1) {
                time = '0' + time.toString()
            }
            return time
        }
        return days
    }

    $(function (){
        days = getNearly7Day();
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        res= [27,33,44,88,55,66,0] //写死了七天的数据，写动态的再写动态更新方法
        // console.log(res);
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption({
            title: {
                text: '近七天阅读量'
            },
            tooltip: {},
            xAxis: {
                data: days
            },
            yAxis: {},
            series: [
                {
                    name: '阅读量',
                    data: res,
                    type: 'line',
                    smooth: true
                }
            ]
        });
    })
</script>
</html>